import { makeObservable, observable, action, computed, autorun } from "mobx";

class Todo {
  id = Math.random();
  title = "";
  finished = false;

  constructor(title, finished) {
    makeObservable(this, {
      title: observable,
      finished: observable,
      toggle: action,
    });
    this.title = title;
    this.finished = finished;
  }

  toggle() {
    this.finished = !this.finished;
  }
}

class TodoList {
  todos = [];
  get unfinishedTodoCount() {
    return this.todos.filter((todo) => !todo.finished).length;
  }
  constructor(todos) {
    makeObservable(this, {
      todos: observable,
      unfinishedTodoCount: computed,
    });
    this.todos = todos;
  }
}

const todos = [new Todo("1", true), new Todo("2", false)];
const todoList = new TodoList(todos);

const unfinishedCount = document.querySelector(".unfinishedCount");
const btn = document.querySelector("#btn");

autorun(() => {
  unfinishedCount.textContent = todoList.unfinishedTodoCount;
});

btn.onclick = function () {
  todoList.todos[0].toggle();
};
